{{ header }}
  {# start admin panel left sidebar #}
  {{ column_left }}
  {# end admin panel left sidebar #}

  {# start lexus theme control #}
  <div id="content">

    <div class="page-header">
      <div class="container-fluid">
        {% if ( settings ) %}
          <div class="pull-right">
            <button type="submit" form="form-module" data-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fa fa-save"></i></button>
            <a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i class="fa fa-reply"></i></a>
          </div>
        {% endif %}
        <h1><b>{{ heading_title }}</b></h1>
        <ul class="breadcrumb">
          {% for breadcrumb in breadcrumbs %}
            <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
          {% endfor %}
        </ul>
      </div>
    </div>

    <div class="container-fluid">

      {% if notices %}
        {% for i, notice in notices %}
          <div class="alert alert-warning alert-dismissible">{{ notice }}</div>
        {% endfor %}
      {% endif %}
      {% if success %}
        <div class="alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> {{ success }}
          <button type="button" class="close" data-dismiss="alert">&times;</button>
        </div>
      {% endif %}

      <div class="tenhc">
        
      </div>  
      {% if ( settings ) %}
        <div class="panel panel-primary">
          <div class="panel-body" style="padding:30px">
              <form action="" method="post" enctype="multipart/form-data" class="form-horizontal row" id="form-module">
                {% if ( settings ) %}
                  <ul class="nav nav-pills  nav-stacked col-md-2 col-sm-4">
                    {% for i, setting in settings %}
                      <li{{ current_tab == i ? ' class="active"' : '' }}>
                        <a href="#setting-tab-{{ setting.id }}" data-toggle="tab" aria-expanded="true">
                          {% if ( setting.icon ) %}
                            <i class="{{ setting.icon }}"></i>
                          {% endif %}
                          {{ setting.name | capitalize }}
                        </a>
                      </li>
                    {% endfor %}
                    {% if ( theme_info ) %}
                      <li><a href="#setting-tab-info" data-toggle="tab" aria-expanded="true"><i class="fa fa-info"></i> {{ tab_title_info }}</a></li>
                    {% endif %}
                  </ul>
                {% endif %}

                <div class="tab-content col-md-10 col-sm-8">
                  {% if ( theme_info ) %}
                    <div id="setting-tab-info" class="tab-pane">
                      <h2 class="theme-name">{{ theme_info.name }}</h2>
                      <div class="theme-desciption alert alert-info">{{ theme_info.description }}</div>
                      <div class="theme-support alert alert-info">{{ theme_info.support }}</div>
                    </div>
                  {% endif %}
                  {% for i, setting in settings %}
                    <div id="setting-tab-{{ setting.id }}" class="tab-pane{{ current_tab == i ? ' active' : '' }}">

                      {% if ( setting.group ) %}
                        <ul class="nav  nav-tabs ">
                          {% set c = 0 %}
                          {% for key, group in setting.group %}
                            <li{{ c == 0 ? ' class="active"' : '' }}>
                              <a href="#setting-group-i-{{ key }}" data-toggle="tab" aria-expanded="true">
                                {{ group }}
                              </a>
                            </li>
                          {% set c = c + 1 %}
                          {% endfor %}
                        </ul>

                        <div class="tab-content">

                          {% set c = 0 %}
                            {% for key, group in setting.group %}
                              <div id="setting-group-i-{{ key }}" class="tab-pane{{ c == 0 ? ' active' : '' }}">
                                {% for item in setting.item %}

                                  {# wrapper class #}
                                  {% set wrapper_class = 'form-group' %}
                                  {% set wrapper_class = item.wrapper_class ? [ wrapper_class, ' ', item.wrapper_class ] | join : wrapper_class %}
                                  {% set wrapper_class = item.required ? [ wrapper_class, ' ', 'required' ] | join : wrapper_class %}
                                  {% if item.id in errors | keys %}
                                      {% set wrapper_class = [ wrapper_class, ' ', 'has-error' ] | join %}
                                  {% endif %}

                                  {% if ( item.group == group ) %}
                                    <div class="{{ wrapper_class }}">
                                      {% if item.label %}
                                        {% if ( item.desc ) %}
                                          <label class="col-sm-2 control-label">
                                            <span data-toggle="tooltip" data-original-title="{{ item.desc | escape }}">{{ item.label }}</span>
                                          </label>
                                        {% else %}
                                          <label class="col-sm-2 control-label" for="{{ item.id }}">{{ item.label }}</label>
                                        {% endif %}
                                      {% else %}
                                        <div class="col-sm-2"></div>
                                      {% endif %}
                                      <div class="col-sm-10">
                                        {{ item.output }}
                                        {% if item.id in errors | keys %}
                                          <div class="text-danger">{{ errors[item.id] }}</div>
                                        {% endif %}
                                      </div>
                                    </div>
                                  {% endif %}
                                {% endfor %}
                              </div>
                            {% set c = c + 1 %}
                          {% endfor %}

                        </div>

                      {% else %}
                        {% for item in setting.item %}

                          {# wrapper class #}
                          {% set wrapper_class = 'form-group' %}
                          {% set wrapper_class = item.wrapper_class ? [ wrapper_class, ' ', item.wrapper_class ] | join : wrapper_class %}
                          {% set wrapper_class = item.required ? [ wrapper_class, ' ', 'required' ] | join : wrapper_class %}
                          {% if item.id in errors | keys %}
                              {% set wrapper_class = [ wrapper_class, ' ', 'has-error' ] | join %}
                          {% endif %}

                          <div class="{{ wrapper_class }}">
                            {% if item.label %}
                              {% if ( item.desc ) %}
                                <label class="col-sm-2 control-label">
                                  <span data-toggle="tooltip" data-original-title="{{ item.desc | escape }}">{{ item.label }}</span>
                                </label>
                              {% else %}
                                <label class="col-sm-2 control-label" for="{{ item.id }}">{{ item.label }}</label>
                              {% endif %}
                            {% else %}
                              <div class="col-sm-2"></div>
                            {% endif %}
                            <div class="col-sm-10">
                              {{ item.output }}
                              {% if item.id in errors | keys %}
                                <div class="text-danger">{{ errors[item.id] }}</div>
                              {% endif %}
                            </div>
                          </div>
                        {% endfor %}
                      {% endif %}

                    </div>
                  {% endfor %}
                </div>
              </form>
          </div>
        </div>
      {% else %}
        <div class="alert alert-info">{{ theme_management_notices }}</div>
      {% endif %}

    </div>
  </div>
  {# end lexus theme control #}
  <script type="text/javascript">
    var PA_SETTINGS = window.PA_SETTINGS = {
      error_missing_google_map: '{{ entry_missing_google_map_key }}'
    }
  </script>
  <script type="text/javascript">
    (function($){
      $( document ).ready(function(){
        // Initialize codemirrror
        if ( typeof CodeMirror == 'function' ) {

          // ajax get setting code editor
          var editors = document.getElementsByClassName( 'pavothemer-code-editor' );
          for ( var i = 0; i < editors.length; i++ ) {

            $.ajax({
              url: '{{ code_editor_get_content_url }}',
              type: 'POST',
              data: {
                setting: $( editors[i] ).attr( 'id' )
              },
              async: false
            }).always(function(){

            }).done(function( res ){

              var code = '';
              if ( typeof res.code !== 'undefined' ) {
                code = res.code;
              }

              var editor = CodeMirror.fromTextArea( editors[i], {
                mode: $( editors[i] ).data('mode'),
                height: '500px',
                lineNumbers: true,
                autofocus: true,
                theme: 'monokai'
              } );
              editor.setValue( code );
              editor.refresh();
            });
          }
        }

        $( document ).on( 'submit', '#form-module', function(e){
          var form = $( this );
          var editors = form.find( '.pavothemer-code-editor' );
          for ( var i = 0; i < editors.length; i++ ) {
            var editor = $( editors[i] ).parent().find('.CodeMirror')[0].CodeMirror;
            $( editors[i] ).val( editor.getValue() );
          }
          return true;
        } );

      });
    })(jQuery);
  </script>

{{ footer }}